import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
// 导入actionCreator
import { add, sub } from '../redux/store'
export default function Count() {
  // useSelector返回什么,count就接收到什么
  const count = useSelector((state) => {
    // 注意: 此时state出现红色波浪线是ts的问题,暂时忽略,最后讲
    return state.count.c
  })

  const dispatch = useDispatch()
  return (
    <div>
      <p>{count}</p>
      <button
        onClick={() => {
          dispatch(add(5))
          //   add(5)的返回值: {type: 'xxx/add',payload: 5}
        }}
      >
        +
      </button>
      <button
        onClick={() => {
          dispatch(sub(2))
          //  sub(2)的返回值: {type: 'xxx/sub',payload: 2}
        }}
      >
        -
      </button>
    </div>
  )
}
